<include file="public@header"/>
<script type="text/html" id="photos-item-tpl">
    <li id="saved-image{id}">
        <input id="photo-{id}" type="hidden" name="photo_urls[]" value="{filepath}">
        <input class="form-control" id="photo-{id}-name" type="text" name="photo_names[]" value="{name}"
               style="width: 160px;" title="图片名称">
        <img id="photo-{id}-preview" src="{url}" style="height:36px;width: 36px;"
             onclick="image_preview_dialog(this.src);">
        <a class="btn btn-default btn-sm" href="javascript:upload_one_image('图片上传','#photo-{id}');">替换</a>
        <!--<a href="javascript:$('#saved-image{id}').remove();">移除</a>-->
    </li>
</script>
<script type="text/html" id="files-item-tpl">
    <li id="saved-file{id}">
        <input id="file-{id}" type="hidden" name="file_urls[]" value="{filepath}">
        <input class="form-control" id="file-{id}-name" type="text" name="file_names[]" value="{name}"
               style="width: 200px;" title="图片名称">
        <a id="file-{id}-preview" href="{preview_url}" target="_blank">下载</a>
        <a class="btn btn-default btn-sm" href="javascript:upload_one('图片上传','#file-{id}');">替换</a>
        <!--<a href="javascript:$('#saved-file{id}').remove();">移除</a>-->
    </li>
</script>
<style>
    #preview_box{display:none;overflow: hidden;  border-bottom: 1px solid #efefef;  padding: 50px;   position: relative;}
    #preview_box .pic{background:#E4CCAD; width:200px; float:left; padding:10px; border-radius:8px; position:relative; box-shadow: 0 3px 20px #F0E3D2;}
    #preview_box .pic em{background:url(__TMPL__/public/assets/images/xuanban-pic-back.png) no-repeat; position:absolute; left:10px; top:10px; width:100%; height:100%;}
    #preview_box img{max-width: 100%;}
    #preview_box .introduce{float: right;  width: 630px;padding-left: 50px;}
    #preview_box .price{position:absolute; right:15px; bottom:50px;}
    #preview_box .price em{display:block; font-size:36px; font-family:Arial, Helvetica, sans-serif; margin-bottom:10px;}
    #preview_box .price em:before{content:"￥"; font-family:微软雅黑; font-size:18px; margin-right:10px; color:#ccc;}
    #preview_box .price a{background:#A90526; display:block; padding:5px 15px; text-align:center; color:#fff; border-radius:100px;  box-shadow: 0px 10px 20px #FDD9E0;}
    #preview_box .price a:hover{background:#CC062E;}
    #preview_box .introduce h1{font-size:32px; font-weight:lighter; margin-bottom:30px;}
    #preview_box .introduce dl{margin-bottom:30px;}
    #preview_box .introduce dl dt{ margin-bottom:25px;}
    #preview_box .introduce dl dt em{background:#F3F3F3; padding:.5rem 1rem; border-radius:5px; font-size:14px;font-style:normal;}
    #preview_box .introduce dl dd {font-size:14px;}
</style>
</head>
<body>
<div class="wrap js-check-wrap">
    <ul class="nav nav-tabs">
        <li><a href="{:url('Course/index')}">所有课程</a></li>
        <li class="active"><a href="{:url('Course/add')}">课程详情</a></li>
    </ul>
    <div class="row margin-top-20">

        <div class="col-md-10 col-md-offset-2">
            <form action="{:url('Course/editPost')}" method="post" class="form-horizontal js-ajax-form margin-top-20" enctype="multipart/form-data">
                <div class="row">
                    <div class="col-md-9">
                        <table class="table table-bordered">
                            <tr>
                                <th width="100">课程类别<span class="form-required">*</span></th>
                                <td>
                                    <select class="form-control" name="parent_id" id="input-parent">
                                        {$categories_tree}
                                    </select>
                                </td>
                            </tr>
                            <tr>
                                <th>课程名称<span class="form-required">*</span></th>
                                <td>
                                    <input type="hidden" class="form-control"  name="id" value="{$course['id']}">

                                    <input type="text" class="form-control" id="input-name" name="course_name" value="{$course['course_name']}">
                                </td>
                            </tr>
                            <tr>
                                <th>课程单价<span class="form-required">*</span></th>
                                <td>
                                    <input type="number" class="form-control" id="input-name9" name="unit_price" value="{$course['unit_price']}">
                                </td>
                            </tr>
                            <tr>
                                <th>课时数<span class="form-required">*</span></th>
                                <td>
                                    <input type="number" class="form-control" id="input-name5" name="course_hour" value="{$course['course_hour']}">
                                </td>
                            </tr>
                            <tr>
                                <th>课程总价</th>
                                <td>
                                    <input type="text" readonly class="form-control" id="input-name6" name="total_price" value="{$course['total_price']}">
                                </td>
                            </tr>
                            <if condition="!empty($course.is_year_one)">
                                <tr>
                                    <th>活动优惠</th>
                                    <td>
                                        <div class="col-xs-10" style="padding-left:0;">
                                            <input type="number" class="form-control" value="{$course.one_reduce_price}" name="one_reduce_price" >
                                        </div>
                                        <div class="col-xs-2">
                                            启用
                                            <input type="checkbox" checked  name="is_year_one"  value="1">
                                        </div>
                                    </td>
                                </tr>
                                <else/>
                                <tr>
                                    <th>活动优惠</th>
                                    <td>
                                        <div class="col-xs-10" style="padding-left:0;">
                                            <input type="number" class="form-control" value="{$course.one_reduce_price}" name="one_reduce_price" >
                                        </div>
                                        <div class="col-xs-2">
                                            启用
                                            <input type="checkbox"   name="is_year_one"  value="1">
                                        </div>
                                    </td>
                                </tr>
                            </if>
                              <if condition="!empty($course.is_year_two)">
                                <tr>
                                    <th>2册连报</th>
                                    <td>
                                        <div class="col-xs-10" style="padding-left:0;">
                                            <input type="number" class="form-control" value="{$course.two_reduce_price}" name="two_reduce_price" >
                                        </div>
                                        <div class="col-xs-2">
                                            启用
                                            <input type="checkbox" checked  name="is_year_two"  value="1">
                                        </div>
                                    </td>
                                </tr>
                                <else/>
                                <tr>
                                    <th>2册连报</th>
                                    <td>
                                        <div class="col-xs-10" style="padding-left:0;">
                                            <input type="number" class="form-control" value="{$course.two_reduce_price}" name="two_reduce_price" >
                                        </div>
                                        <div class="col-xs-2">
                                            启用
                                            <input type="checkbox"   name="is_year_two"  value="1">
                                        </div>
                                    </td>
                                </tr>
                            </if>
                            <if condition="!empty($course.is_year_three)">
                                <tr>
                                    <th>3册连报</th>
                                    <td>
                                        <div class="col-xs-10" style="padding-left:0;">
                                            <input type="number" class="form-control" value="{$course.three_reduce_price}" name="three_reduce_price" >
                                        </div>
                                        <div class="col-xs-2">
                                            启用
                                            <input type="checkbox" checked  name="is_year_three"  value="1">
                                        </div>
                                    </td>
                                </tr>
                                <else/>
                                <tr>
                                    <th>3册连报</th>
                                    <td>
                                        <div class="col-xs-10" style="padding-left:0;">
                                            <input type="number" class="form-control" value="{$course.three_reduce_price}" name="three_reduce_price" >
                                        </div>
                                        <div class="col-xs-2">
                                            启用
                                            <input type="checkbox"   name="is_year_three"  value="1">
                                        </div>
                                    </td>
                                </tr>
                            </if>

                            <tr>
                                <th>标题图</th>
                                <td>
                                    <ul id="photos" class="pic-list list-unstyled form-inline">
                                        <li id="saved-imageundefined">
                                            <input id="photo-undefined" type="hidden" name="photo_urls[]" value="{$img['file_path']}">
                                            <input class="form-control valid" id="photo-undefined-name" type="text" name="photo_names[]" value="{$img['filename']}" style="width: 160px;" title="图片名称" aria-invalid="false">
                                            <img id="photo-undefined-preview" src="/upload/{$img['file_path']}" style="height:36px;width: 36px;" onclick="image_preview_dialog(this.src);">
                                            <a href="javascript:course_upload_multi_image('图片上传','#photos','photos-item-tpl');"
                                               class="btn btn-default btn-sm" >替换</a>
                                            <!--<a href="javascript:$('#saved-imageundefined').remove();">移除</a>-->
                                        </li>
                                    </ul>
                                </td>
                            </tr>
                            <tr>
                                <th>课程简介</th>
                                <td>
                                    <textarea class="form-control" name="summary" id="input-name8" cols="80" rows="5">{$course['summary']}
                                    </textarea>
                                </td>
                            </tr>
                            <tr>
                                <th>培养目标</th>
                                <td>
                                    <script type="text/plain" id="content" name="description">
                                         {$course['description']}
                                    </script>
                                </td>
                            </tr>
                            <tr>
                                <th>上传录音</th>
                                <td>
                                    <if condition="!empty($record_asset)">
                                        <a href="{:url('Course/down',array('record_asset_id'=>$course.record_asset_id))}">{$record_asset.filename}</a>
                                    </if>
                                    <input type="file" id="exampleInputFile" value="点击上传" name="record">
                                </td>
                            </tr>
                            <tr>
                                <th>可见范围</th>
                                <td>
                                    <input type="radio" name="enabled" value="1"  {$rr|default="0"}>前台可见
                                    <input type="radio" name="enabled" value="0" {$tt|default="0"}>前台不可见
                                </td>
                            </tr>
                        </table>
                        <div class="form-group">
                            <div class="col-sm-offset-2 col-sm-10">
                                <button type="submit" class="btn btn-primary js-ajax-submit">{:lang('SAVE')}</button>
                                <a class="btn btn-primary" id="preview">预览 </a>
                                <a class="btn btn-default" href="{:url('Course/index')}">{:lang('BACK')}</a>
                            </div>
                        </div>
                    </div>
                </div>
            </form>

        </div>
    </div>
</div>

<div id="preview_box">
    <!--图片 -->
    <div class="pic">
        <em></em>
        <span>
            <img src="课程封面" alt="课程封面"/>
        </span>
    </div>
    <!--图片 -->
    <!--介绍 -->
    <div class="introduce">
        <h1 class="course_name">请输入课程名</h1>
        <dl>
            <dt><em>课程简介</em></dt>
            <dd class="summary">
                请输入课程简介
            </dd>
        </dl>
        <dl>
            <dt><em>培养目标</em></dt>
            <dd class="description">
                请输入培养目标
            </dd>
        </dl>
        <dl>
            <dt><em>课程时长</em></dt>
            <dd>
                <p class="course_hour">x个课时</p>
            </dd>
        </dl>
        <span class="price">
            <a >我要报名</a>
        </span>
    </div>
</div>
<!--ajax layer 弹窗-->
<script type="text/javascript" src="__STATIC__/js/admin.js"></script>
<script type="text/javascript">
    //编辑器路径定义
    var editorURL = GV.WEB_ROOT;
</script>
<script type="text/javascript" src="__STATIC__/js/ueditor/ueditor.config.js"></script>
<script type="text/javascript" src="__STATIC__/js/ueditor/ueditor.all.min.js"></script>
<script>
    (function(){
        //百度编辑
        editorcontent = new baidu.editor.ui.Editor();
        editorcontent.render('content');
        try {
            editorcontent.sync();
        } catch (err) {
        }

        $('.btn-cancel-thumbnail').click(function () {
            $('#thumbnail-preview').attr('src', '__TMPL__Public/assets/images/default-thumbnail.png');
            $('#thumbnail').val('');
        });
        //自己写
        //自己写
        var reg=new RegExp('^[0-9]*[.]*[0-9]*$');
        //课程单价不能为空或者不是数字
        $("#input-name9").blur(function()
        {
//            console.log($(this).val());
//            if(!reg.test($(this).val()) || $(this).val()=='')
//            {
//                alert("请输入数字");
//                $(this).focus();
//                $(this).val('0');
//
//            }
            if($("#input-name5").val()!=='' && reg.test($("#input-name5").val()))
            {
                $val=parseFloat($(this).val()) * parseFloat($("#input-name5").val());
                if($val){
                    $("#input-name6").val($val.toFixed(2));
                }else{
                    $("#input-name6").val('');
                    $("#input-name6").attr('placeholder','请输入课时数和课程单价');
                }
            }
        })

        //课时数不能为空或者不是数字
        $("#input-name5").blur(function()
        {
//            if(!reg.test($(this).val())|| $(this).val()=='')
//            {
//                alert("请输入数字");
//                $(this).focus();
//                $(this).val('0');
//            }

            if($("#input-name9").val()!=='' && reg.test($("#input-name9").val()))
            {
                $val=parseFloat($(this).val())*parseFloat($("#input-name9").val());
                if($val){
                    $("#input-name6").val($val.toFixed(2));
                }else{
                    $("#input-name6").val('');
                    $("#input-name6").attr('placeholder','请输入课时数和课程单价');
                }
            }
        })

        $('.btn-cancel-thumbnail').click(function () {
            $('#thumbnail-preview').attr('src', '__TMPL__Public/assets/images/default-thumbnail.png');
            $('#thumbnail').val('');
        });

        //chase添加预览课程
        $('#preview').click(function(){
            $('.course_name').html($('input[name="course_name"]').val());
            $('.summary').html($('textarea[name="summary"]').val());
            $('.course_hour').html($('input[name="course_hour"]').val());
            $('.description').html($('[name="description"]').val());
            $('.pic').find('img').attr('src',$('#photos').find('img').attr('src'));



            layer.open({
                type: 1,
                title: '前台课程预览',
                area:['auto','auto'],
                content: $('#preview_box'),
                yes: function (index,layero)
                {
                    $('#submit').click();
                }
            })
        })


    })();
    function doSelectCategory() {
        var selectedCategoriesId = $('#js-categories-id-input').val();
        console.log(selectedCategoriesId);
        open_iframe_layer("{:url('course/CourseCategory/add')}?ids=" + selectedCategoriesId, '请选择分类', {
            area: ['700px', '400px'],
            btn: [ '完成'],
            yes: function (index, layero) {
                layer.close(index); //如果设定了yes回调，需进行手工关闭
            }
        });
    }
    //替换图片

</script>
</body>
</html>